<template>
  <el-tooltip class="item"
              effect="dark"
              :content="fullscreen ? `取消全屏`:`全屏`"
              placement="bottom-start">
    <i @click.stop="handleFullScreen"
       :class="fullscreen ? 'icon-01-fullscreen-exit' : 'icon-01-fullscreen'"
       class="iconfont"></i>
  </el-tooltip>
</template>

<script>
  export default {
    name: 'my-fullscreen',
    data () {
      return {
        fullscreen: false
      }
    },
    methods: {
      // 全屏切换
      handleFullScreen () {
        console.log(123123)

        let element = document.documentElement
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen()
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen()
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen()
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen()
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen()
          }
        }
        this.fullscreen = !this.fullscreen
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
